<template>
	<view class="content">
		<view class="project">
			<view class="title">
				<view class="" style="width: 48rpx;height: 48rpx; ">
					<image src="../../../static/icon/report/1.png" mode="" style="width: 48rpx;height: 48rpx;"></image>
				</view>
				<view>{{service.serviceName}}</view>
			</view>
			<view class="" style="display: flex; margin-bottom: 24rpx;">
				<view class="" style="margin-right: 24rpx;">服务时间</view>
				<view class="">
					<view class="" style=" ">{{service.scheduleTime}}</view>
				</view>
			</view>
			<view class="" style="display: flex; margin-bottom: 24rpx;">
				<view class="" style="margin-right: 24rpx;">服务地址</view>
				<view class="">
					<view class="" style=" ">{{service.address}}</view>
				</view>
			</view>
			<view class="" style="display: flex; margin-bottom: 24rpx;">
				<view class="" style="margin-right: 24rpx; white-space:nowrap;">服务对象</view>
				<view class="" style="display: flex; flex-wrap:wrap;">
					<view class="" style=" margin-right: 16rpx;">{{service.userName}}</view>
					<view class="" style=" margin-right: 16rpx;">{{service.healthFile.sex}}</view>
					<view class="" style=" margin-right: 16rpx;">{{service.healthFile.age}}岁</view>
					<view class="other" @click="other">查看其他资料</view>
				</view>
			</view>
		</view>
		<view class="project">
			<view class="title">
				<view class="" style="width: 48rpx;height: 48rpx; ">
					<image src="../../../static/icon/report/2.png" mode="" style="width: 48rpx;height: 48rpx;"></image>
				</view>
				<view>体征检查<text style="font-size: 24rpx; color: #999999;">（选填）</text></view>
			</view>
			<view class="sign">
				<view class="">体温(摄氏度)</view>
				<input type="number" value="" v-model="data.animalHeat" placeholder="请填写体温" />
			</view>
			<view class="sign">
				<view class="">脉搏(次/分)</view>
				<input type="number" value="" v-model="data.sphygmus" placeholder="请填写心跳" />
			</view>
			<view class="sign">
				<view class="">呼吸(次/分)</view>
				<input type="number" value="" v-model="data.breathe" placeholder="请填写呼吸" />
			</view>
			<view class="sign">
				<view class="">血压（mmHg）</view>
				<view class="pressure">
					<input type="number" name='low' placeholder="低压(mmHg)" v-model="lowPre"
						placeholder-class="placeholder-class" />
					<input type="number" name="height" placeholder="高压(mmHg)" v-model="heightPre"
						placeholder-class="placeholder-class" />
				</view>
			</view>
		</view>
		<view class="project">
			<view class="title">
				<view class="" style="width: 48rpx;height: 48rpx; ">
					<image src="../../../static/icon/report/3.png" mode="" style="width: 48rpx;height: 48rpx;"></image>
				</view>
				<view>护理记录<text style="font-size: 24rpx; color: #999999;">（必填）</text></view>
			</view>
			<view class="photoTitle">
				护理图片<text style="font-size: 16rpx; color: #999999;">（5-10张）</text>
			</view>
			<view class="photoBox">
				<view class="photo" v-for="(item,index) in photo" :class="{'none': (index+1)%4==0}"
					style="background-color: rgba(243, 246, 246, 1);" :key="index" @click.prevent="clickImg(index)">
					<image :src="item" mode="aspectFit"></image>
					<text class="iconfont icon-a-qingkongpng cha" @click.stop="del(index)"></text>
				</view>
				<view class="addPhoto" @click="add" v-show="photo.length<10">
					<view class="iconfont icon-paishe xiangji">
					</view>
				</view>


			</view>
			<view class="photoTitle1">
				<view class="photoTitle">
					上传须知：
				</view>
				<text class="p">1、上门护士本人手持身份证照片，并且身份证清晰</text>
				<text class="p">2、操作照，前中后各一张。</text>
				<text class="p">3、服务承诺函，需患者进行签字。</text>


			</view>

			<view class="photoTitle" style="line-height: 76rpx;">
				护理内容
			</view>
			<textarea value="" v-model="data.nursingContent" placeholder="请填写一百字以内的护理记录"
				placeholder-style="color: rgba(0, 0, 0, 0.1);" class="record" />
		</view>
		<view class="project">
			<view class="title">
				<view class="" style="width: 48rpx;height: 48rpx; ">
					<image src="../../../static/icon/report/4.png" mode="" style="width: 48rpx;height: 48rpx;"></image>
				</view>
				<view>患者主述<text style="font-size: 24rpx; color: #999999;">（必填）</text></view>
			</view>
			<textarea value="" v-model="data.principleAction" placeholder="请填写用户的症状叙述"
				placeholder-style="color: rgba(0, 0, 0, 0.1);" class="record" />
		</view>
		<view class="project">
			<view class="title">
				<view class="" style="width: 48rpx;height: 48rpx; ">
					<image src="../../../static/icon/report/4.png" mode="" style="width: 48rpx;height: 48rpx;"></image>
				</view>
				<view>健康指导<text style="font-size: 24rpx; color: #999999;">（必填）</text></view>
			</view>
			<textarea value="" v-model="data.healthGuidance" placeholder="请填写对用户的健康指导"
				placeholder-style="color: rgba(0, 0, 0, 0.1);" class="record" />
		</view>
		<view class="leiming">
			<checkbox-group @click="check">
				<label>
					<checkbox value="cb" :checked="checked" color="#3C8EFF" style="transform:scale(0.7)" />
					请如实填写以上内容，如有弄虚作假，后果由填写的护士本人负责，并直接影响本次操作的佣金结算。
				</label>
			</checkbox-group>
		</view>
		<view class="end">
			<view class="save" @click="save()">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	import LbPicker from '@/components/uni-ui/lb-picker';
	import uploadImage from '@/common/js/ossutil/uploadFile.js'
	import {
		translateapp
	} from '../../../common/js/common.js'
	import {
		created
	} from '@/apis/report/index.js'
	import {
		selectOrderInfo
	} from '@/apis/order/index.js'
	import {
		requestAndroid
	} from '@/common/js/location.js'
	export default {
		data() {
			return {
				number: '', //订单号
				//高压低压
				heightPre: '',
				lowPre: '',
				//血压选项默认值
				pressureDefault: [70, 110],
				photo: [], //照片
				checked: false, //是否本人操作
				service: '', //用户信息
				data: {
					animalHeat: '',
					//体温
					bloodPressure: '',
					//血压
					breathe: '',
					//呼吸
					staPictureUrl: '',
					endPictureUrl: '',
					//护理图片
					healthGuidance: '',
					//健康指导
					number: '',
					//订单号
					nursingContent: '',
					//护理内容
					sphygmus: '',
					//脉搏
					userId: '',
					//用户id
					principleAction: '', //患者主述
				}, //上传内容
			}
		},
		onLoad(option) {
			if (option.number) {
				this.number = option.number
			}
			console.log(this.number, 'number')
		},
		onShow() {
			this.orderMsg()
		},
		watch: {
			photo(val) {
				if (val.length > 10) {
					this.photo = this.photo.slice(0, 10)
				}
			}
		},
		computed: {
			//低压范围
			low() {
				let arr = []
				for (let i = 50; i < 100; i++) {
					arr.push(i)
				}
				return arr
			},
			//高压范围
			height() {
				let arr = []
				for (let i = 70; i < 200; i++) {
					arr.push(i)
				}
				return arr
			},
			showHeight() {
				if (this.heightPre) {
					return '高压:' + this.heightPre + 'mmHg'
				}
			},
			showLow() {
				if (this.lowPre) {
					return '低压:' + this.lowPre + 'mmHg'
				}
			},
			pressureArr() {
				// let arr=[this.low , this.height]
				let arr = [
					[1],
					[2]
				]
				return arr
			}
		},
		methods: {
			//添加照片
			add() {
				let that = this;
				if (this.photo.length > 10) {
					plus.nativeUI.toast('您只需上传10张图片')
					// uni.showToast({
					// 	icon:'none',
					// 	title:'您只需上传两张图片'
					// })
				} else {
					uni.chooseImage({
						count: 10, //默认9
						sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album', 'camera'],
						// sourceType: ['album'], //从相册选择
						success: function(res) {
							let tempFiles = res.tempFilePaths;
							uni.showLoading({
								title: '上传中……',
							})
							//上传图片 请求多个图片
							for (var i = 0; i < tempFiles.length; i++) {
								translateapp(tempFiles[i], 80, imgUrl => {
									// console.log(imgUrl,'护理报告---imgUrl');
									uploadImage(imgUrl, 'feedback/',
										result => {
											console.log('打印的结果', result);
											that.url = result;
											that.photo.push(result) //如果图片一次性就超过这个值怎么使他赋的值回退
											uni.hideLoading()
										}, error => {
											uni.showToast({
												title: '上传失败',
												image: '../../static/authentication/error.png'
											})
										})

								})
								// uploadImage(tempFiles[i], 'feedback/',
								// 	result => {
								// 		console.log('打印的结果', result);
								// 		that.url = result;
								// 		that.photo.push(result) //如果图片一次性就超过这个值怎么使他赋的值回退
								// 		uni.hideLoading()
								// 	}, error => {
								// 		uni.showToast({
								// 			title: '上传失败',
								// 			image: '../../static/authentication/error.png'
								// 		})
								// 	})
							}
						},
						fail(e) {
							if (e.errCode == 11) {
								requestAndroid('android.permission.CAMERA', '摄像头')
							}
							// console.log(e,'shibaihuid........')
						}
					});
				}
			},
			//删除照片
			del(index) {
				uni.showModal({
					title: '确认删除当前图片吗',
					confirmColor: '#FF6A00',
					success: (res) => {
						if (res.confirm) {
							this.photo.splice(index, 1)
						}
					}
				})
			},
			//图片预览
			clickImg(index) {
				let _this = this
				wx.previewImage({
					urls: _this.photo,
					current: _this.photo[index], // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			//本人操作
			check() {
				this.checked = !this.checked
				console.log(this.checked, '是否本人操作')
			},
			//查看用户其他资料
			other() {
				uni.navigateTo({
					url: '../../order/other-detaile/other-detaile?number=' + this.number
				})
			},
			//提交
			async save() {
				if (this.checked) {
					if (this.lowPre && this.heightPre) {
						this.data.bloodPressure = this.lowPre + '/' + this.heightPre
					}
					if (this.data.healthGuidance && this.data.nursingContent && this.data.principleAction) {
						if (this.photo.length > 10 || this.photo.length < 5) {
							plus.nativeUI.toast('护理图片需为5-10张')
							// uni.showToast({
							// 	icon:'none',
							// 	title:'护理图片需为两张！'
							// })
							return
						}
						this.data.staPictureUrl = this.photo.join(',')
						// this.data.staPictureUrl = '3333'
						this.data.userId = this.service.healthFile.userId
						this.data.number = this.number
						console.log(this.data, '000000000011111111111')
						let res = await created(this.data)
						if (res.success) {
							plus.nativeUI.toast('创建护理报告成功')
							// uni.showToast({
							// 	icon:'none',
							// 	title:'创建护理报告成功'
							// })
							setTimeout(() => {
								uni.navigateTo({
									url: '../order-detaile/order-detaile?number=' + this.data.number
								})
								// uni.navigateBack({
								// 	delta: 1
								// }, 300)
							})
						}
					} else {
						plus.nativeUI.toast('请填写所有必选项')
						// uni.showToast({
						// 	icon:'none',
						// 	title:'请填写所有必选项！'
						// })
					}
				} else {
					plus.nativeUI.toast('请确认是您本人真实操作')
					// uni.showToast({
					// 	icon:'none',
					// 	title:'请确认是您本人真实操作！'
					// })
				}
			},
			//获取订单详情
			async orderMsg() {
				let number = this.number
				let res = await selectOrderInfo({
					number
				})
				this.service = res.object
				console.log(res, '订单详情')
			}
		},
		components: {
			LbPicker
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		background: linear-gradient(180deg, #60A3FE 0%, #F3F6F6 764rpx, rgba(243, 246, 246, 1) 100%);
		width: 100%;
		min-height: 100vh;
		padding: 40rpx 26rpx;
		box-sizing: border-box;
	}

	.project {
		background: #FFFFFF;
		border-radius: 8rpx;
		padding: 44rpx 24rpx;
		box-sizing: border-box;
		margin-bottom: 16rpx;

		.other {
			width: 160rpx;
			height: 42rpx;
			background: #FFFFFF;
			border-radius: 4rpx;
			border: 1rpx solid #3C8EFF;
			line-height: 42rpx;
			text-align: center;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #3C8EFF;
		}
	}

	.title {
		line-height: 48rpx;
		height: 48rpx;
		display: flex;
		margin-bottom: 32rpx;

		view {
			// width: 160rpx;
			height: 56rpx;
			font-size: 40rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: rgba(0, 0, 0, 0.87);
			line-height: 48rpx;
			margin-left: 8rpx;
		}
	}

	.sign {
		height: 108rpx;
		border-bottom: 1rpx rgba(0, 0, 0, 0.1) solid;
		display: flex;
		justify-content: space-between;
		align-items: center;

		input {
			font-size: 28rpx;
			text-align: right;
		}
	}

	.pressure {
		display: flex;
		width: 442rpx;
		align-items: center;
		justify-content: space-between;

		input {
			width: 210rpx;
			// border-bottom: rgba(0, 0, 0, 0.1) 1rpx solid;	
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			// padding-left: 10rpx;
			box-sizing: border-box;
			display: block;
		}
	}

	.photoBox {
		display: flex;
		flex-wrap: wrap;


		.addPhoto {
			width: 152rpx;
			height: 152rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			border: 2rpx dashed rgba(0, 0, 0, 0.87);
			margin-right: 26rpx;
			margin-bottom: 26rpx;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;

		}

		.photo {
			width: 144rpx;
			height: 144rpx;
			border-radius: 20rpx;
			margin-right: 26rpx;
			margin-bottom: 26rpx;
			position: relative;

			&.none {
				margin-right: 0;
			}

			image {
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
			}

			.cha {
				position: absolute;
				font-size: 36rpx;
				right: -10rpx;
				top: -18rpx;
			}
		}

	}

	.p {
		display: block;
		font-size: 20rpx;
		color: #FF6A00;
	}

	.photoTitle {
		height: 76rpx;
		line-height: 50rpx;
		color: rgba(0, 0, 0, 0.87);

	}

	.photoTitle1 {
		border-bottom: 1px rgba(0, 0, 0, 0.1) solid;

		.photoTitle {
			height: 36rpx;
			line-height: 30rpx;
		}
	}


	.record {
		width: 100%;
		min-height: 20rpx;
	}

	.leiming {
		height: 128rpx;
		// line-height: 128rpx;
		color: rgba(0, 0, 0, 0.38);
		margin-bottom: 212rpx;
	}

	.end {
		width: 100%;
		height: 212rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		box-shadow: 0rpx -6rpx 8rpx 0rpx rgba(0, 0, 0, 0.03);

		.save {
			margin: 0 auto;
			margin-top: 24rpx;
			height: 96rpx;
			width: 698rpx;
			text-align: center;
			color: #ffffff;
			line-height: 96rpx;
			background-color: #3C8EFF;
			border-radius: 20rpx;
		}
	}
</style>